<template>
  <div :class="$style.tag">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="indexId" label="类别">
            <SearchSelectPicker
              :value.sync="formData.indexId"
              url="/call-center/api/v1/appraise/appraiseIndex/page"
              value-name="indexId"
              lable-name="indexName"
              placeholder="请选择类别"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="tagName" label="标签">
            <el-input v-model="formData.tagName" placeholder="请输入标签" clearable></el-input>
          </el-form-item>
          <el-form-item prop="isGood" label="标识">
            <el-select v-model="formData.isGood" placeholder="请选择标识" clearable>
              <el-option :value="1" label="好评"></el-option>
              <el-option :value="0" label="差评"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="state" label="状态">
            <el-select v-model="formData.state" clearable placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="停用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div style="text-align:right">
        <AddOrEdit type="primary" label="新建" title="新建" @refresh="queryHandle('onPage')"></AddOrEdit>
        <AddOrEdit type="primary" label="修改" title="修改" is-edit :selected="selectedAry" @refresh="queryHandle('onPage')"></AddOrEdit>
        <Button type="primary" @click="batEnableDisableHandle">启用</Button>
        <Button type="primary" @click="batEnableDisableHandle('disable')">停用</Button>
      </div>
      <table-box
        ref="table"
        no-request
        :table-config="tableConfig"
        :other-filters="otherFilters"
        @selection-change="selectionChange"
      >
        <el-table-column slot="before" type="selection" align="center" width="40" />
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { enableTag, disableTag, appraiseIndexPage } from '@/api/serviceQuality'
import AddOrEdit from './components/AddOrEdit'
export default {
  name: 'Tag',
  components: {
    ContentWrap,
    FormContainer,
    AddOrEdit,
    SearchSelectPicker
  },
  data() {
    return {
      otherFilters: [],
      selectedAry: [],
      formData: {
        indexId: '',
        tagName: '',
        isGood: '',
        state: 1
      },
      formRules: {},
      indexList: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/appraise/appraiseTag/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'orderNumber',
        order: 'asc',
        // 表格字段动态配置
        setting: [
          {
            type: 'index',
            width: '80',
            align: 'center',
            label: '序号',
            formatData: (val) => {
              return val.keyIndex + 1
            }
          },
          {
            prop: 'indexName',
            label: '类别',
            formatData: v => {
              const { indexId } = v
              for (const item of this.indexList) {
                if (item.id === indexId) {
                  return item.indexName
                }
              }
              return ''
            }
          },
          {
            prop: 'tagName',
            label: '标签'
          },
          {
            prop: 'isGood',
            label: '标识',
            formatData: v => {
              return v.isGood === 1 ? '好评' : '差评'
            }
          },
          {
            prop: 'state',
            label: '状态',
            formatData: v => {
              return v.state === 1 ? '启用' : '停用'
            }
          },
          {
            prop: 'orderNumber',
            label: '排序'
          },
          {
            prop: 'createBy',
            label: '创建人'
          },
          {
            prop: 'createTime',
            label: '创建时间'
          },
          {
            prop: 'lastUpdateBy',
            label: '操作人'
          },
          {
            prop: 'lastUpdateTime',
            label: '变更时间'
          }
        ]
      }
    }
  },
  created() {
    this.getIndexList()
  },
  methods: {
    // 获取所有指标数据
    getIndexList() {
      appraiseIndexPage().then(res => {
        this.indexList = res.data.records
      })
    },
    // 查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        this.otherFilters = this.$genOtherFilters(this.formData, this.$genRule('=', ['state', 'indexId', 'isGood'], this.$genRule('like', ['tagName'])))
        this.$nextTick(() => {
          this.$refs.table.initTableData(type)
        })
      })
    },
    // 启用/停用
    batEnableDisableHandle(type) {
      this.$checkSelected(this.selectedAry, false).then(() => {
        let ajax = enableTag
        if (type === 'disable') {
          ajax = disableTag
        }
        return ajax(this.selectedAry).then(res => {
          this.$message.success('操作成功！')
          this.queryHandle('onPage')
        })
      })
    },
    // 表格选中事件
    selectionChange(val) {
      this.selectedAry = val
    }
  }
}
</script>
<style lang='scss' module>
.tag{
  tr{
    background-color: white !important;
  }
}
</style>
